[Javascript]Ractive.jsでシンプルにDOM操作をする

#JavaScript

中村修太

2013.07.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Ractive.js

Ractive.jsは、インタラクティブなDOM操作を行うためのライブラリです。
データバインディングやDOM更新を簡単に行うことができます。
最近のJavascriptフレームワークを使えば、そういったことはだいたいできますが、
Ractive.jsはとても軽量かつ覚えることも少ないので、すぐに使い始めることができます。
今回はここでやっているように、Ractive.jsを動かしてみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

OS : MacOS X 10.7.5

セットアップ&動作確認

セットアップはとても簡単です。
ここからRactive.jsをダウンロードします。
そしてサンプル用index.htmlを作成し、次のように記述しましょう。

<!doctype html>
<html lang='ja'>
<head>
    <meta charset='utf-8'>
    <title>ractive sample</title>
</head>

<body>
 <div id='container'>
 </div>

 <script id='myTemplate' type='text/ractive'>
      <label>your name: <input value='{{name}}'></label>
      <p>Hello, {{name}}!</p>
 </script>
    
 <script src='Ractive.js'></script>
 <script>
        var ractive = new Ractive({
            el: '#container',
            template: '#myTemplate'
        });
 </script>
</body>
</html>

上記サンプルでは、テキストフィールドに入力された文字列を、そのままテキスト表示しています。
Ractiveオブジェクト作成時に渡しているelには、出力先ブロックを、templateには出力内容を表すテンプレートを渡しています。
これだけの記述で、フィールドとテキストをバインディングすることができます。

もう一つサンプルを見てみます。下記例では、ボタンを押すとテンプレート内容のrecipientプロパティが更新されます。

<!doctype html>
<html lang='ja'>
<head>
    <meta charset='utf-8'>
    <title>ractive sample</title>
</head>

<body>
 <div id='container'>
 </div>

 <script id='myTemplate' type='text/ractive'>
    <p>{{greeting}}, {{recipient}}!</p>
    <input id='btn' type='button' value="click" /> </br>
 </script>
    
 <script src='Ractive.js'></script>
 <script>
        var ractive = new Ractive({
            el: '#container',
            template: '#myTemplate',
            data: { greeting: 'Hello', recipient: 'world'}
        });
       document.getElementById( 'btn' ).addEventListener( 'click', function () {
            ractive.set( 'recipient', 'taro' );
       });
  </script>
</body>
</html>

ここでは、ボタンクリックのタイミングでractive.set関数を使って、recipientプロパティを更新しています。